import { StatusBar, StyleSheet, Text, View,}  from 'react-native';
// import Home from './src/pages/Home';
import './global';
import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Ionicons } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import Home from './src/page/Home';
import Detail from './src/page/Detail';

const Stack = createNativeStackNavigator()
const Btab = createBottomTabNavigator()

const HomeScreen = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle:{
          backgroundColor:'#f4511e'
        },
        // headerBackVisible:false,
        headerTitleAlign:'center',
        headerTintColor:'#fff',
        headerTitleStyle:{
          frontWeightL:'bold',
        },
      }}
    >
      {/* Screen相当于Router */}
      <Stack.Screen
        name='home'
        component={Home}
        options={{
          title:'首页',
        }}
      />
      <Stack.Screen
        name='detail'
        component={Detail}
      />

    </Stack.Navigator>
  )
}

const Setting = ()=> <Text>设置页面</Text>
const screens = ['home','set','userinfo']
const tabbarIsVisible = (route) => {
  const routeName = getFocusedRouteNameFromRoute(route)//当前页的RouteName
  return screens.includes(routeName)
}
export default function APP(){
  return (
    <NavigationContainer>
      <Btab.Navigator
        screenOptions={{headerShown:false}}
      >
        <Btab.Screen
          name='homeScreen'
          component={HomeScreen}
          options={(route)=>(
            {
              title:'首页',
              tabBarIcon: ({color,size}) => <Ionicons name="home" size={size} color={color}/>,
              tabBarStyle:{display:tabbarIsVisible(route)?'block':'none'}
            }   
          )}
        />
        <Btab.Screen
          name='setting'
          component={Setting}
          options={(route)=>(
            {
              title:'设置',
              tabBarIcon: ({color,size}) => <AntDesign name="setting" size={24} color="black" />,
              tabBarStyle:{display:tabbarIsVisible(route)?'block':'none'}
            }
          )}
        />
      </Btab.Navigator>
      <StatusBar/>
    </NavigationContainer>
  )
}

// const styles = StyleSheet.create({
//   container: {
//       width: width,
//       height: height,
//       transform: [
//           { translateX: -width * .5 },
//           { translateY: -height * .5 },
//           { scale: scale },
//           { translateX: width * .5 },
//           { translateY: height * .5 }
//       ]
//   }
// });


// // import { StatusBar } from 'expo-status-bar';
// import { useState,useEffect } from 'react';
// import {  
//   StatusBar, StyleSheet, 
//   Text, View, Image, ImageBackground, TextInput, ScrollView, TouchableOpacity, Button, Pressable, FlatList, Dimensions, PixelRatio } 
//   from 'react-native';
// import useTopics from './src/hooks/use-topics.js'
// import './global.js'
// // const Btn = ({onPress,children,style,textstyle})=>{
// //   return (
// //     <TouchableOpacity
// //       onPress={onPress}
// //       style={
// //         [
// //           {
// //             backgroundColor:'#ccc',
// //             padding:10,
// //             justifyContent:'center',
// //             alignSelf:'center',
// //           },style
// //         ]
// //       }
// //     >
// //       <Text style={[{
// //         fontSize:20, 
// //         color:'#1dd'
// //       },textstyle]}>{children}</Text>
// //     </TouchableOpacity>
// //   )
// // }

// export default function App() {
//   const [value, setValue] = useState('');
//   const {loading,list,onRefresh,onEndReached} = useTopics();
//   const size = Dimensions.get('window')
//   console.log(size)
//   console.log(PixelRatio.get())
 
//   return ( 
//     <View style={{flex:1}}>
//       {/* <View style={{
//         flexDirection:'row'
//       }}>
//         <Btn 
//           onPress={()=>console.log(123)}
//           style={{
//             width:100,
//             borderRdius:10,
//             backgroundColor:'0f0'
//         }}>全部</Btn>
//         <Btn>精华</Btn>
//         <Btn>分享</Btn>
//       </View>
//       <Pressable
//         android_ripple={{color:'f00'}}
//         style={{backgroundColor:'#ccc'}}
//         // style={({Pressed})=>({//通过点击改变样式
//         //   backgroundColor:Pressed?'#ccc':'#fff'
//         // })}
//       >
//           <Text>
//             Pressable
//           </Text>
//         </Pressable>
            
//       <Button
//         title='按钮'
//         color='#f00'
//       ></Button> */}
//       <TextInput
//         style={{
//           borderWidth:2,
//           borderColor:'#f00',
//           width:px2dp(375),
//           height:30,
//           borderRadius:15,
//           alignSelf:'center',
//           // margin:20,
//           // paddingHorizontal:20
//         }}
//         onChangeText={text=>setValue(text)}
//         value={value}
//       />
//       {/* 拿取数组中的内容做列表 */}
//       {/* <FlatList
//         refreshing={loading}
//         onRefresh={onRefresh}
//         onEndReached={onEndReached}
//         style={{flex:1}}
//         data={list}
//         renderItem={({item})=><Text>{item.title}</Text>}
//         keyExtractor={(item)=>item.id}
//       /> */}
//       <StatusBar/>
//     </View>

//     //<View style={styles.container}>
//       // <Image 
//       //   style={{width:200,height:200}}
//       //   source={require('./assets/icon.png')}
//       // />
//       // <Image source={require('./assets/favicon.png')}/>

//       // <ImageBackground
//       //   style={{
//       //     height:100,
//       //     width:200,
//       //     borderColor:'#f00',
//       //     borderWidth:2,
//       //     sizeMode:'repeat.'
//       //   }}
//       //   source={{
//       //     uri:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
//       //   }}
//       // >
//       //   <Text>百度</Text>
//       // </ImageBackground>
//       // <TextInput
//       //   style={{
//       //     borderWidth:2,
//       //     borderColor:'#f00',
//       //     width:300,
//       //     height:30,
//       //     borderRadius:15,
//       //     alignSelf:'center',
//       //     margin:20,
//       //     paddingHorizontal:20
//       //   }}
//       //   onChangeText={text=>setValue(text)}
//       //   value={value}
//       // />
//       // <StatusBar/>
//     //</View>
//   );
// }

// const styles = StyleSheet.create({
//   container: {
//     backgroundColor: '#ccc',
//     height:200,
//     alignItems:'center',
//     justifyContent:'center'
//   },
//   textColor:{
//     color:'#fff',
//     fontSize:30
//   }
// });

